// components/dropdown/index.js
Component({
  externalClasses: ["icon-class", "item-warp-class"],
  /**
   * 组件的属性列表
   */
  properties: {
    /**
     * 是否将选中[item]的内容替换[tab]中内容
     */
    isSelectedItemToTab: {
      type: String,
      value: "false"
    },
    /**
     * 选项内容最大高度
     */
    dropdownItemMaxHeight : null,
    /**
     * 选项内容是否有[全部]选项，默认为有
     */
    dropdownItemHasAllButton: {
      type: String,
      value: "true"
    },
    /**
     * 传入数据的格式:
     * _showName, _selected : 非传入数据，应操作需要由js设置
      [
        { id: 1, name: "品牌", showName: 'aa'
          items: [{ id: 1, name: "a品牌" }, { id: 2, name: "b品牌", _selected: true }]
        },
        { id: 2, name: "产地", 
          items: [{ id: 1, name: "a产地" }, { id: 2, name: "b产地" }]
        },
        { id: 3, name: "容量",
          items: [{ id: 1, name: "a容量" }, { id: 2, name: "b容量", _selected: false }]
        }
      ]
     */
    data: {
      type: Object,
      value: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // dropdown 相关
    selectedDropdown: null,
    selectedDropdownIndex: null,
    // dropdownItem 相关
    selectedDropdownItem: null,
    // selectedDropdownItemIndex: null,
    // 格式：{selectedDropdownId: selectedDropdownItemId}
    selectedDropdownItems: {},
    // 其他
    hasMask: false,  // 遮罩层
    upordown: "down"
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 下拉框确定点击事件
     */
    dropdownTap(e) {
      let _this = this;
      let item = e.currentTarget.dataset.item;
      let index = e.currentTarget.dataset.index;
      let isShow = false;
      // 遍历数据并处理
      let datas = this.properties.data;
      let _data = null;
      for (let data of datas){
        if (item.id === data.id){
          _data = data;
          if (null != this.data.selectedDropdown && this.data.selectedDropdown.id === item.id){
            if (undefined !== data._selected){
              data._selected = !data._selected;
            }
          }else{
            data._selected = true;
          }
          if (data._selected === true) {
            isShow = true;
          }
        }else{
          data._selected = false;
        }
      }
      // 更新数据
      _this.setData({
        data: datas,
        selectedDropdown: item,
        selectedDropdownIndex: index
      });
      if (isShow){
        _this.setData({
          hasMask: true,//遮罩层
          upordown: 'up',
        })
      }else{
        _this.setData({
          hasMask: false, //遮罩层
          upordown: 'down',
        })
      }
    },

    /**
     * 点击[全部]下拉列表
     */
    optionTapAll(e){
      let _this = this;
      let dropdown = e.currentTarget.dataset.dropdown;
      const selectedDropdownItems = _this.data.selectedDropdownItems;
      // 已经选中则跳过
      if (undefined === selectedDropdownItems[dropdown.id]) {
        return;
      }
      // 清除列表选项选择
      delete selectedDropdownItems[dropdown.id];
      let data = this.properties.data[_this.data.selectedDropdownIndex];
      for (let data of data.items) {
        delete data._selected;
      }
      // 更新数据
      _this.setData({
        data: _this.properties.data,
        selectedDropdownItem: null,
      //  selectedDropdownItemIndex: null,
        selectedDropdownItems: selectedDropdownItems,
        hasMask: false, //遮罩层的显示或隐藏
        upordown: 'down',
      });
      // 激活事件
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent(
        'dropdownItemTap',
        {
          selectedDropdown: _this.data.selectedDropdown,
          selectedDropdownItem: null,
          selectedDropdownItems: selectedDropdownItems
        },
        myEventOption
      );
    },

    /**
     * 点击下拉列表
     */
    optionTap(e) {
      let _this = this;
      let item = e.currentTarget.dataset.item;
      // let index = e.currentTarget.dataset.index;
      let isChange = false;
      // 遍历数据并处理
      let tab = _this.properties.data[_this.data.selectedDropdownIndex];
      let datas = tab.items;
      let _data = null;
      for (let data of datas) {
        if (item.id === data.id) {
          _data = data;
          data._selected = true;
          _this.data.selectedDropdownItems[_this.data.selectedDropdown.id] = item.id;
          if (null == _this.data.selectedDropdownItem || _this.data.selectedDropdownItem.id !== item.id) {
            isChange = true;
          }
          //
          if (_this.data.isSelectedItemToTab === "true"){
            tab._showName = item.name;
          }
        } else {
          data._selected = false;
        }
      }
      // 更新数据
      _this.setData({
        data: _this.properties.data,
        selectedDropdownItem: item,
      //  selectedDropdownItemIndex: index,
        selectedDropdownItems: _this.data.selectedDropdownItems,
        hasMask: false, //遮罩层的显示或隐藏
        upordown: 'down',
      });
      // 激活事件
      if (isChange){
        var myEventOption = {} // 触发事件的选项
        this.triggerEvent(
          'dropdownItemTap', 
          {
            selectedDropdown: _this.data.selectedDropdown,
            selectedDropdownItem: item,
            selectedDropdownItems: _this.data.selectedDropdownItems,
            componentData: _this.properties.data
          }, 
          myEventOption
        );
      }
    }
  }
  
})
